<template>
  <div class="login-container">
    <div class="login-box">
      <h3 class="title">IoT Platform</h3>
      
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        autocomplete="on"
      >
        <el-form-item prop="username">
          <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="用户名"
            name="username"
            type="text"
            tabindex="1"
            autocomplete="on"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            ref="password"
            v-model="loginForm.password"
            :type="passwordVisible ? 'text' : 'password'"
            placeholder="密码"
            name="password"
            tabindex="2"
            autocomplete="on"
            @keyup.enter="handleLogin"
          >
            <template #suffix>
              <el-icon
                class="cursor-pointer"
                @click="passwordVisible = !passwordVisible"
              >
                <component :is="passwordVisible ? 'View' : 'Hide'" />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-button
          :loading="loading"
          type="primary"
          class="login-button"
          @click="handleLogin"
        >
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { View, Hide } from '@element-plus/icons-vue'

const store = useStore()
const router = useRouter()
const route = useRoute()

// 登录表单
const loginForm = reactive({
  username: 'admin',
  password: 'password'
})

// 表单验证规则
const loginRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

// 引用
const loginFormRef = ref(null)
const loading = ref(false)
const passwordVisible = ref(false)

// 登录方法
const handleLogin = () => {
  loginFormRef.value.validate(valid => {
    if (valid) {
      loading.value = true
      store.dispatch('user/login', loginForm)
        .then(() => {
          const redirectPath = route.query.redirect || '/'
          router.push(redirectPath)
          ElMessage.success('登录成功')
          loading.value = false
        })
        .catch(error => {
          ElMessage.error(error.message || '登录失败，请重试')
          loading.value = false
        })
    } else {
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  width: 100%;
  background-color: #2d3a4b;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-box {
    width: 400px;
    padding: 40px 30px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.1);
    
    .title {
      font-size: 26px;
      color: #eee;
      margin: 0 0 40px 0;
      text-align: center;
      font-weight: bold;
    }
    
    .login-form {
      width: 100%;
      
      :deep(.el-form-item) {
        margin-bottom: 20px;
        border: none;
        background: none;
      }
      
      :deep(.el-input) {
        height: 47px;
        
        input {
          height: 47px;
          background-color: rgba(0, 0, 0, 0.25);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 4px;
          color: #fff;
          caret-color: #409EFF;
          padding: 0 15px;
          font-size: 15px;
          
          &:-webkit-autofill {
            box-shadow: 0 0 0 1000px #283443 inset !important;
            -webkit-text-fill-color: #fff !important;
          }
          
          &::placeholder {
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
      
      .login-button {
        width: 100%;
        height: 47px;
        margin-top: 10px;
      }
    }
  }
}
</style> 